<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
        transform: translateX(100px);
        }
        .v-enter-active,.v-leave-active{
            transition:all 0.5s ease
        }
        .router-link-active{
        /* 这个是vue 路由中的样式类名 */
            color:#872657;
            font-size: 28px;
            font-weight: bold;
            cursor:pointer;
        }
    </style>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
    <div id="app">
        <router-link to="/" exact tag="span">Home</router-link>
        <router-link to="/login"  tag="span">登录</router-link>
        <router-link to="/reg"  tag="span">注册</router-link>
        <transition mode="out-in">
        
            <router-view></router-view>
        </transition>
    </div>
    <script>
        var home = {
            template:'<h2>这是Home组件</h2>'
        };
        var login = {
            template:'<h2>这是登录组件</h2>'
        };
        var reg = {
            template:'<h2>这是注册组件</h2>'
        };
        const router = new VueRouter({
            routes:[
                {path:'/',component:home}, //这里component属性的值，是要路由到模板对象的名字，而不是组件的名字
                {path:'/login',component:login},
                {path:'/reg',component:reg},
            ]
        });
        var vm = new Vue({
            el:'#app',
            router:router,
        })
    </script>
</body>
</html>